<template>
    <div>
        <h3>房型列表</h3>
        <input type="button" value="添加房型" @click="add">
        <div>
            房型名称:<input type="text" v-model="a.name" />
            <input type="button" value="查询" @click="getlist">
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房型名称</td>
                    <td>单价</td>
                    <td>室内面积</td>
                    <td>最多入住人数</td>
                    <td>图片上传</td>
                    <td>房间描述</td>
                    <td>是否有窗</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list">
                    <td>{{item.Name}}</td>
                    <td>{{item.Price}}</td>
                    <td>{{item.Area}}</td>
                    <td>{{item.PeopleNum}}</td>
                    <td><img :src="item.Photo" width="200"></td>
                    <td>{{item.Desc}}</td>
                    <td>{{item.State==1?"有窗":"无窗"}}</td>
                    <td><input type="button" value="修改" @click="update(item.Id)">
                    <input type="button" value="删除" @click="Del(item.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
<div>
    <span>共{{data.zongHang}}条</span>
    <span>每页{{a.pageHang}}条</span>
    <span>共{{a.pageYe}}/{{data.zongYe}}页</span>
    <input type="button" value="首页" @click="gopage(1)">
    <input type="button" value="上一页" @click="gopage(a.pageYe-1)">
    <span v-for="item in data.zongYe" :value="item" @click="gopage(item)" >{{item}}</span>
    <input type="button" value="下一页" @click="gopage(a.pageYe+1)">
    <input type="button" value="尾页" @click="gopage(data.zongYe)">
</div>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted}from 'vue'
import axios from 'axios';
import { useRoute,useRouter } from 'vue-router';
const router=useRouter();
const route=useRoute();

const add:any=()=>{
    router.push("/addtype");
}

onMounted(()=>{
    show();
})

let a:any=reactive({
    pageYe:1,
    pageHang:2,
    name:''
})

let data:any=reactive({
    list:[],
    zongHang:0,
    zongYe:0
})

const update:any=(id:any)=>{
router.push({
    path:'/updatetype',
    query:{id:id}
})
}

const Del:any=(id:any)=>{
let f=confirm("确认删除?");
if(f){
    axios({
        url:'/api/House/Del',
        method:'delete',
        params:{id:id}
    })
    .then((res)=>{
        if(res.data>0)
        {
            alert("删除成功");
            show();
        }
    })
}
}

const gopage:any=(num:any)=>{
if(num<1)
{
    a.pageYe=1;
    return;
}
if(num>data.zongYe)
{
    a.pageYe=data.zongYe;
    return;
}
a.pageYe=num;
show();

}

const getlist:any=()=>{
    a.pageYe=1
    show();
}

const show:any=()=>{
    axios({
        url:'api/House/ShowHouseType',
        method:'get',
        params:a
    })
    .then((res)=>{
        data.list=res.data.list
        data.zongHang=res.data.zongHang
        data.zongYe=res.data.zongYe
    })
}
</script>

<style scoped>
span{
    margin: 0 5px;
}
a{
    margin: 0 10px;
}
input{
    margin: 0 3px;
}
</style>